<script setup lang='ts'>
import { ref } from "vue";
import { getLineBasicInfoApi } from '@/apis/user'
import { showToast } from "vant";

const props = defineProps({
    overview_id: Number
})

const chanxianlist = ref([])

const getLineBasicInfo = async () => {
    const res = await getLineBasicInfoApi(props.overview_id)
    // console.log(res);
    if (res.data.code === 200) {
        let list = res.data.data.info.details
        chanxianlist.value = []
        list.forEach((item, index) => {
            let colorby = '', tempUrl = '', dripUrl = '', areaUrl = '', fyUrl = ''
            // 温度
            switch (item.cr8c4_description) {
                case 'Degreasing':// 脱脂
                    colorby = '1'
                    // 温度50-60
                    if (item.temperature < 50) {
                        tempUrl = new URL('../../assets/img/temp_1.png', import.meta.url).href
                    } else if (item.temperature > 60) {
                        tempUrl = new URL('../../assets/img/temp_3.png', import.meta.url).href
                    } else {
                        tempUrl = new URL('../../assets/img/temp_2.png', import.meta.url).href
                    }
                    break
                case 'Acid Pickling':// 酸洗
                    colorby = '2'
                    // 温度20-35
                    if (item.temperature < 20) {
                        tempUrl = new URL('../../assets/img/temp_1.png', import.meta.url).href
                    } else if (item.temperature > 35) {
                        tempUrl = new URL('../../assets/img/temp_3.png', import.meta.url).href
                    } else {
                        tempUrl = new URL('../../assets/img/temp_2.png', import.meta.url).href
                    }
                    break
                case 'Thin Film':// 硅烷
                    colorby = '3'
                    // 温度25-40
                    if (item.temperature < 25) {
                        tempUrl = new URL('../../assets/img/temp_1.png', import.meta.url).href
                    } else if (item.temperature > 40) {
                        tempUrl = new URL('../../assets/img/temp_3.png', import.meta.url).href
                    } else {
                        tempUrl = new URL('../../assets/img/temp_2.png', import.meta.url).href
                    }
                    break
                case 'Passivation':// 钝化
                    colorby = '3'
                    // 温度25-40
                    if (item.temperature < 25) {
                        tempUrl = new URL('../../assets/img/temp_1.png', import.meta.url).href
                    } else if (item.temperature > 40) {
                        tempUrl = new URL('../../assets/img/temp_3.png', import.meta.url).href
                    } else {
                        tempUrl = new URL('../../assets/img/temp_2.png', import.meta.url).href
                    }
                    break
                case 'Phosphating':// 磷化
                    colorby = '4'
                    // 温度35-60
                    if (item.temperature < 35) {
                        tempUrl = new URL('../../assets/img/temp_1.png', import.meta.url).href
                    } else if (item.temperature > 60) {
                        tempUrl = new URL('../../assets/img/temp_3.png', import.meta.url).href
                    } else {
                        tempUrl = new URL('../../assets/img/temp_2.png', import.meta.url).href
                    }
                    break
                case 'Saponification':// 皂化
                    colorby = '5'
                    break
                case 'Lubrication':// 润滑
                    colorby = '5'
                    break
                case 'Reactive Oil':// 拉拔油
                    colorby = '5'
                    break
                case 'VIANT':
                    colorby = '6'
                    break
                case 'Rinsing':// 水洗
                    colorby = '0'
                    // 温度20-35
                    if (item.temperature < 20) {
                        tempUrl = new URL('../../assets/img/temp_1.png', import.meta.url).href
                    } else if (item.temperature > 35) {
                        tempUrl = new URL('../../assets/img/temp_3.png', import.meta.url).href
                    } else {
                        tempUrl = new URL('../../assets/img/temp_2.png', import.meta.url).href
                    }
                    break
                case 'Hot water cleaning':// 热水洗
                    colorby = '0'
                    // 温度40-50
                    if (item.temperature < 40) {
                        tempUrl = new URL('../../assets/img/temp_1.png', import.meta.url).href
                    } else if (item.temperature > 50) {
                        tempUrl = new URL('../../assets/img/temp_3.png', import.meta.url).href
                    } else {
                        tempUrl = new URL('../../assets/img/temp_2.png', import.meta.url).href
                    }
                    break
                default:
                    colorby = '0'
                    tempUrl = new URL('../../assets/img/temp_2.png', import.meta.url).href
                    break;
            }
            // 反应时间
            if (item.reaction_time > 0 && item.reaction_time <= 30) {
                fyUrl = new URL('../../assets/img/time_fy1.png', import.meta.url).href
            } else if (item.reaction_time > 30 && item.reaction_time <= 60) {
                fyUrl = new URL('../../assets/img/time_fy2.png', import.meta.url).href
            } else if (item.reaction_time > 60 && item.reaction_time <= 90) {
                fyUrl = new URL('../../assets/img/time_fy3.png', import.meta.url).href
            } else if (item.reaction_time > 90 && item.reaction_time <= 120) {
                fyUrl = new URL('../../assets/img/time_fy4.png', import.meta.url).href
            } else if (item.reaction_time > 120) {
                fyUrl = new URL('../../assets/img/time_fy5.png', import.meta.url).href
            }
            // 沥干时间
            if (item.drain_time > 0 && item.drain_time <= 120) {
                dripUrl = new URL('../../assets/img/time_drip1.png', import.meta.url).href
            } else if (item.drain_time > 120) {
                dripUrl = new URL('../../assets/img/time_drip2.png', import.meta.url).href
            }
            // 颜色、体积
            if (item.volume < 10) {
                areaUrl = new URL(`../../assets/img/color_${colorby}_1.png`, import.meta.url).href
            } else if (item.volume >= 10 && item.volume < 60) {
                areaUrl = new URL(`../../assets/img/color_${colorby}_2.png`, import.meta.url).href
            } else if (item.volume >= 60 && item.volume < 100) {
                areaUrl = new URL(`../../assets/img/color_${colorby}_3.png`, import.meta.url).href
            } else {
                areaUrl = new URL(`../../assets/img/color_${colorby}_4.png`, import.meta.url).href
            }

            let info = {
                id: 'c' + index + 1,
                name: item.cr8c4_description,
                time_reaction: item.reaction_time,
                temp: item.temperature,
                area: item.volume,
                time_drip: item.drain_time,
                colorby,
                fyUrl,
                tempUrl,
                dripUrl,
                areaUrl
            }
            chanxianlist.value.push(info)
        })
    } else {
        showToast(res.data.msg)
    }

}

getLineBasicInfo()
</script>

<template>
    <div class="chanxianbox clmstart">
        <div class="cxitem" v-for="item in chanxianlist" :key="item.id">
            <div class="times clmcenter">
                <div class="tcont">
                    Reaction time
                </div>
                <div class="timesinfo"
                    :style="{ background: 'url(' + item.fyUrl + ') no-repeat', backgroundSize: '100% 100%' }">
                    {{ item.time_reaction }}<span>s</span>
                </div>
            </div>
            <div class="temp">
                <div class="tcont">{{ !isNaN(parseFloat(item.temp)) ? item.temp + '℃' : item.temp }}</div>
                <div class="tempinfo">
                    <img :src="item.tempUrl" class="icon_temp" />
                </div>
            </div>
            <img src="@/assets/img/line_chanxian.png" class="line_chanxian" />
            <div class="itemstepbox">
                <div class="stepinfobox clmcenter">
                    <p class="stepname">{{ item.name }}</p>
                    <div class="stepimgbox clmcenter">
                        <img :src="item.areaUrl" class="stepimg" />
                        <p class="stepnum">{{ item.area }}m³</p>
                    </div>
                </div>
                <!-- 沥干时间 -->
                <div class="liganbox">
                    <img src="@/assets/img/jt_down.png" class="jt_down" />
                    <div class="ligantitle">Transfer time</div>
                    <div class="ligantimes"
                        :style="{ background: 'url(' + item.dripUrl + ') no-repeat', backgroundSize: '100% 100%' }">{{
                            item.time_drip }}<span>s</span></div>
                </div>
            </div>

        </div>
    </div>
</template>

<style lang="scss" scoped>
.chanxianbox {
    position: relative;
    width: 100%;
    margin: 50px auto 30px;
    font-family: 'Helvetica';
    .cxitem {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 14px;
        font-size: 1.78rem;
        .times,
        .temp {
            position: relative;
            height: 29px;
            line-height: 1.1;
            text-align: center;
            color: #ffffff;
            .tcont {
                width: 100%;
                height: 100%;
                white-space: nowrap;
            }
        }
        .times {
            width: 172px;
            .tcont {
                background-color: #4b91f8;
                clip-path: polygon(0 50%, 9px 0, 100% 0, 163px 14px, 100% 100%, 9px 100%, 0 50%);
            }
            .timesinfo {
                position: absolute;
                bottom: 39px;
                width: 70px;
                height: 70px;
                color: #004d91;
                line-height: 66px;
                span {
                    font-size: 1.19rem;
                }
            }
        }
        .temp {
            width: 87px;
            .tcont {
                background-color: #195dee;
                clip-path: polygon(0 50%, 9px 0, 100% 0, 79px 14px, 100% 100%, 9px 100%, 0 50%);
            }
            .tempinfo {
                position: absolute;
                bottom: 39px;
                left: 38.5px;
                width: 22px;
                height: 62px;
                .icon_temp {
                    width: 100%;
                }
            }
        }
        .line_chanxian {
            width: 78px;
            height: 12px;
        }
        .itemstepbox {
            position: relative;
            margin-left: -35px;
            .stepinfobox {
                width: 161px;
                height: 161px;
                background: url('@/assets/img/cxitembg.png') no-repeat;
                background-size: 100% 100%;
                .stepname {
                    font-weight: bold;
                }
                .stepimgbox {
                    position: relative;
                    width: 130px;
                    margin-top: 20px;
                    .stepimg {
                        width: 100%;
                    }
                    .stepnum {
                        position: absolute;
                        padding-top: 0.8rem;
                    }
                }
            }
            // 沥干时间
            .liganbox {
                display: flex;
                justify-content: flex-start;
                align-items: flex-end;
                margin-left: 70px;
                .jt_down {
                    width: 21px;
                    height: 46px;
                }
                .ligantitle {
                    width: 153px;
                    height: 29px;
                    background-color: #4b91f8;
                    text-align: center;
                    color: #ffffff;
                    line-height: 1.1;
                    clip-path: polygon(0 0, 144px 0, 100% 14px, 144px 100%, 0 100%, 9px 14px, 0 0);
                }
                .ligantimes {
                    margin-left: 6px;
                    width: 68px;
                    height: 68px;
                    font-size: 1.7rem;
                    color: #004d91;
                    font-weight: 500;
                    line-height: 68px;
                    margin-bottom: -20px;
                    span {
                        font-size: 1.19rem;
                    }
                }
            }
        }
    }
}
</style>